<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>WEB-LOG</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    {#    <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css">#}
    <link rel="icon" href="/static/images/logo.jpeg">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <link rel="stylesheet" href="/static/css/reset.css" type="text/css">
    <link rel="stylesheet" href="/static/css/jquery.Jcrop.css" type="text/css">
    <link rel="stylesheet" href="/static/css/headImgUpload.css" type="text/css">
    <link rel="stylesheet" href="/static/css/popup.css" type="text/css">

    <link rel="stylesheet" href="/static/css/index.css">

</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top my-navbar">
    <div class="container">
        <!--页面导航-->
        <div class="navbar-header" style="position: absolute; left: 5%">
                <a class="navbar-brand" href="#"><img src="/static/images/weblogo.png" alt="logo"
                                                  style="width: 200px; "></a>
        </div>

        <div style="position: absolute; right: 10%">
            <!--搜索框-->
            {#                <form class="navbar-form navbar-right my-form">#}
            {#                    <div class="form-group">#}
            {#                        <input type="text" class="form-control" placeholder="Search">#}
            {#                    </div>#}
            {#                    <a class="my-img" href="#"></a>#}
            {#                </form>#}

            <ul class="nav navbar-nav my-navbar-nav user-info">
                <li><a><img class="user-icon" style="margin: -10px; height: 35px; width: 35px" src="{{ path }}" ></a></li>
                <li><a href="#" class="head-img-add-btn click-block user-name" id="headAddBtn" reveal-model-id="popup-head-upload" style="display: none">{{ user }}</a></li>
            </ul>
        </div>
    </div>
</nav>



<!--模态窗-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2"
     style="width: 700px; margin: auto">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">

            <!--登录页面-->
            <div>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                    <h4 class="modal-title" id="myModalLabel1">登录</h4>
                </div>

                <div class="modal-body my-modal-body">
                    <div class="my-phone-login">
                        <form>
                            <div class="form-group" style="width: 80%; margin: auto">
                                <input type="text" class="form-control" id="usernameInput" placeholder="用户名">
                            </div>
                            <br>
                            <div class="form-group" style="width: 80%; margin: auto">
                                <input type="password" class="form-control" id="passwordInput" placeholder="密码">
                            </div>
                            <br>
                            <div class="checkbox">
                                <small>&nbsp;&nbsp;&nbsp;&nbsp;忘记密码？ 联系我</small>
                                <a class="pull-right" onclick="registwindow()"><small> 注册 </small></a>
                            </div>
                        </form>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="login()">登录</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2"
     style="width: 700px; margin: auto">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">

            <!--注册页面-->
            <div>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                    <h4 class="modal-title" id="myModalLabel2">注册</h4>
                </div>

                <div class="modal-body my-modal-body">
                    <div class="my-phone-login">
                        <form>
                            <div class="form-group" style="width: 80%; margin: auto">
                                <input type="text" class="form-control" id="usernameInput1" placeholder="用户名">
                            </div>
                            <br>
                            <div class="form-group" style="width: 80%; margin: auto">
                                <input type="password" class="form-control" id="passwordInput1" placeholder="密码">
                            </div>
                            <br>
                        </form>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="regist()">注册</button>
                </div>
            </div>

        </div>
    </div>
</div>
<!--发布的模态窗-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2" style="width: 1200px; margin: auto">
    <div class="modal-dialog" role="document">
        <div class="modal-content clearfix">

            <!--发布页面-->
            <div class="my-publish">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel3">想要说什么呢？</h4>
                </div>

                <div class="modal-body my-modal-body">
                    <form>
                        <div class="form-group">
                            <label for="exampleInputTitle">标题</label>
                            <input type="text" class="form-control" id="exampleInputTitle" placeholder="标题">
                        </div>
                        <div class="form-group">
                                    <textarea class="form-control" rows="3" id="exampleInputTextarea1"
                                              placeholder="说点什么呢？"></textarea>
                        </div>
                    </form>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="clearInput()">清空</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="publish()">发布</button>
                </div>
            </div>

        </div>
    </div>
</div>

<!--登陆动作的模态框-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="alert alert-danger login-info" role="alert">登陆失败</div>
    </div>
</div>


<!--中心内容-->
<div class="container my-container" style="width: 75%">
    <div class="row">
        <!--左侧列表内容-->
        <div class="col-md-9">
            <div class="jumbotron" style="height: 100px">
                <p style="position: relative; bottom: 13px; left: 10px">烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫烫</p>
            </div>
            <!--标签页-->
            <div class="clearfix my-nav">
{#                <ul class="nav nav-pills pull-left my-navbar-nav">#}
{#                    <li class="active"><a href="#">最热</a></li>#}
{#                    <li><a href="#">最新</a></li>#}
{#                </ul>#}
                <button class="btn pull-left btn-default btn-success" style="width: 120px"
                        onclick="publishwindow()"><span class="glyphicon glyphicon-plus-sign"></span><span> 发布</span>
                </button>
                <a target="_blank" href={%  url 'pending' %} >
                    <button class="btn btn-default btn-info" style="width: 120px; margin-left: 20px">
                        <span class="glyphicon glyphicon-globe"></span><span> 大查询</span>
                </button>
                </a>
            </div>

            <!--主体-->
            <div class="list-group my-list-article"></div>

            <!--分页-->
            <nav aria-label="Page navigation" style="text-align: center;">
                <ul class="pagination">

                </ul>
            </nav>

        </div>

        <!--右侧列表内容-->
        <div class="col-md-3">
            <div class="list-group">
                <a href="#" class="list-group-item active" disabled="true">常用链接</a>
                <a href="http://121.4.140.74:5601/app/dev_tools#/console" class="list-group-item" target="_blank">Kibana</a>
                <a href="http://1.15.178.69:3000/d/bLeCvlXGk/new-dashboard-copy?orgId=1" class="list-group-item" target="_blank">Grafana</a>
                <a href="#" class="list-group-item">Link</a>
            </div>
            <div class="jumbotron" style="height: auto">
                <p style="font-size: 15px; margin-left: -20px">采集的数据可以在Kibana和Grafana看到</p>
                <p style="font-size: 15px; margin-left: -20px">Grafana用户admin，密码snbzsyc</p>
            </div>


        </div>
    </div>

<!--头像上传弹出层-->
<div class="head-img-layout">
    <div class="box-content" id="popup-head-upload">
        <h2>头像选择<a href="#" class="close-reveal-model">×</a></h2>
        <div>
            <div class="wrap">
                <div class="head-img-tab">
                    <ul class="clearfix" id="headimg_upload">
                        <li class="on" style="position: relative;bottom: 2px"><a href="#">自定义上传</a></li>
                        <li style="position: relative;bottom: 2px"><a href="#">默认头像</a></li>
                    </ul>
                </div>
                <div class="mod-con clearfix">
                    <div class="head-img-tab-con">
                        <div id="head-img-upload_1" style="display: block">
                            <div>
                                <div id="uploader" class="custom-upload" >
                                    <div class="queueList">
                                        <div id="dndArea" class="placeholder">
                                            <div id="filePicker"></div>
                                            <p>或者可以将图片拖到这里</p>
                                        </div>
                                    </div>
                                    <div class="statusBar" >
                                        <div class="btns" style="margin-top: 20px">
                                            <i class="png"></i>
                                            <div id="filePicker2" style="height: auto; width: auto"></div>
                                            <!--<div class="uploadBtn">开始上传</div>-->
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-grop clearfix">
                                    <a class="close-reveal-model button uploaderBtnSure btn-radius" id="uploaderBtnSure">确定</a>
                                    <a class="close-reveal-model margin-l10 button btn-secondary btn-radius">取消</a>
                                </div>
                            </div>
                        </div>
                        <div id="head-img-upload_2" style="display: none">
                            <div class="head-default" id="head-default"></div>
                            <div class="btn-grop clearfix">
                                <a class="close-reveal-model button defaultBtnSure btn-radius" id="defaultBtnSure">确定</a>
                                <a class="close-reveal-model margin-l10 button btn-secondary btn-radius">取消</a>
                            </div>
                        </div>
                    </div>
                    <div class="head-img-preview">
                        <div class="preview-con" id="preview-pane">
                            <div class="title">效果预览</div>
                            <div class="crop-img-60" id="crop-img-60">
                                <div class="crop-img-container">
                                    <img src="/static/images/default.png" alt="">
                                </div>
                                <span>60*60px</span>
                            </div>
                            <div class="crop-img-120" id="crop-img-120">
                                <div class="crop-img-container">
                                    <img src="/static/images/default.png" alt="">
                                </div>
                                <span>120*120px</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <hr>
    <footer style="margin-bottom: 30px">
        <p>© Evan Zhang</p>
    </footer>

</div>

<!--回到顶部图标-->
<div class="move-top" title="回到顶部"></div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
{#    <script src="./jquery/jquery.min.js"></script>#}
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{#    <script src="./bootstrap-3.3.7/js/bootstrap.min.js"></script>#}
<script src="/static/js/tab.exam.js" type="text/javascript"></script>
<script src="/static/js/reveal-model.js" type="text/javascript"></script>
<!--头像上传组件-->
<script src="/static/js/webuploader.js" type="text/javascript"></script>
<script src="/static/js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="/static/js/headImgUpload.js" type="text/javascript"></script>

</body>
<script src="/static/js/index.js"></script>

</html>
